<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML面试题</title>
  <link rel="stylesheet" href="../1style/index.css"/>
  <script src="../1style/jquery.js"></script>
</head>
<body>
<h1>HTML面试题</h1>

<h3>介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？</h3>
<div>
    <pre>
    标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin [如果IE678未添加doctype，即怪异模式，那么也是用IE模型]
    低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin [从IE9以后，则不用填写声名也用的是W3C模型]
    </pre>
</div>

<h3>box-sizing属性？</h3>
<div>
    <pre>
    用来控制元素的盒子模型的解析模式，默认为content-box / 标准模型 /
    context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
    border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
    </pre>
</div>

<h3>content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box?</h3>
<div>
    <pre>
    content-box是W3C的标准盒模型 元素宽度+padding+border
    border-box 是ie的怪异盒模型，他的元素宽度等于内容宽度 内容宽度包含了padding和border
    比如有时候在元素基础上添加内边距padding或border会将布局撑破 但是使用border-box就可以轻松完成
    </pre>
</div>

<h3>Doctype作用? 严格模式与混杂模式如何区分? 它们有何意义?</h3>
<div>
    <pre>
    web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    在 HTML 4.01 中 基于 SGML,HTML5 不基于 SGML，所以不需要引用 DTD。
    在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：默认标准盒模型
    DOCTYPE 影响盒子模型
    </pre>
</div>

<h3>HTML5 的 form 如何关闭自动完成功能?</h3>
<div>
    <pre>
    autocomplete="off" （给不想要提示的 form 或某个 input 设置为 autocomplete=off。）
    </pre>
</div>

<h3>CSS选择器有哪些? 哪些属性可以继承?</h3>
<div>
    <pre>
    CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
    可继承的属性：font-size, font-family, color
    不可继承的样式：border, padding, margin, width, height
    优先级（就近原则）：!important > [ id > class > tag ]
        <span>!important 比内联优先级高</span>
    </pre>
</div>

<h3>请简述CSS样式表继承</h3>
<div>
    <pre>
     继承:color, font, letter-spacing,line-height, text-align, text-indent
     不继承:width、height、margin padding border
    </pre>
</div>

<h3>&lt;image&gt; 标签上title属性与alt属性的区别是什么？</h3>
<div>
    <pre>
    alt 一个必需的属性，它规定在图像无法显示时的替代文本。
    title 规定关于元素的额外信息, tooltip text tip:提示 tool:工具
    </pre>
</div>

<h3>请写出至少5个html5新增的标签，并说明其语义和应用场景</h3>
<div>
    <pre>
        nav定义导航链接的	section定义文档中的节	article定义独立的内容
        header文档的头部	footer文档的尾部区域	  datalist--input 历史联想值
        time定义日期或时 	aside比如侧边栏       address联系方式地址
        canvas 使用JavaScript在网页上绘制图形图像。
    </pre>
</div>

<h3>行内元素的特性</h3>
<div>
    <pre>
        行内元素不会自动换行，设置宽高无效
        行内元素设置margin左右有效，上下无效
        padding都无效[亲测,padding-top:无效,别的都有效果]
    </pre>
</div>

<h3>请说说你对标签语义化的理解？</h3>
<div>
    <pre>
        a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
        b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
        c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
        d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
    </pre>
</div>

<h3>HTML与XHTML二者有什么区别</h3>
<div>
    <pre>
    d. XHTML 文档必须拥有根元素。a. XHTML 元素必须被正确地嵌套。b. XHTML 元素必须被关闭。c. XHTML 必须小写
    </pre>
</div>

<h3>html5有哪些新特性、移除了那些元素？</h3>
<div>
    <pre>
    a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    b. 拖拽释放(Drag and drop) API
    c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
    d. 音频、视频API(audio,video)
    e. 画布(Canvas) API   f. 地理(Geolocation) API
    g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失  h. sessionStorage 的数据在页面会话结束时会被清除
    i. 表单控件，calendar、date、time、email、url、search
    j. 新的技术webworker, websocket等
    移除的元素：
    a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
    b. 对可用性产生负面影响的元素：frame，frameset，noframes；
    </pre>
</div>

<h3>HTML里常见的单位？</h3>
<div>
    <pre>
    px cm mm em hv (rem % 相对倍数)
    </pre>
</div>

<h3>自适应解决方案？</h3>
<div>
    <pre>
        1.视窗 viewport   2.移动端页面自适应解决方案—rem布局    3.@media媒体查体  4.%百分比
    </pre>
</div>

<h3>解释下浮动和它的工作原理？请列举几种可以清除浮动的方法（至少两种）</h3>
<div>
    <pre>
    浮动:脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
    1, 父级div定义 height  2, 结尾处加空div标签 clear:both
    3, 父级div定义 overflow:hidden
    4, :after{clear:both;}IE8以上和非IE浏览器才支持:after//zoom(IE转有属性)可解决ie6,ie7浮动问题
    </pre>
</div>

<h3>请列举几种隐藏元素的方法</h3>
<div>
    <pre>
    d. display: none；  a. visibility: hidden;  b. opacity: 0；(完全透明) c. position: absolute；
    e. transform: scale(0)；将一个元素设置为无限小，位置将被保留。
    f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，
    g. height: 0; overflow: hidden；
    h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
    </pre>
</div>

<h3>请简述CSS的选择器</h3>
<div>
    <pre>
    元素选择器：* 、a、 div、 E.class
    关系选择器：E、F、E>F、E+F、E~F
    属性选择器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
    伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
    伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
    </pre>
</div>

<h3>::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用</h3>
<div>
    <pre>
    单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
    对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
	  ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
	  :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。
    起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
    </pre>
</div>

<h3>CSS伪类与CSS伪对象的区别</h3>
<div>
    <pre>
    伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
    伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
    </pre>
</div>

<h3>在CSS样式中常使用px、em，rem各有什么优劣，在表现上有什么区别？</h3>
<div>
    <pre>
        任意浏览器的默认字体高都是16px
    px。像素px是相对于显示器屏幕分辨率而言的。如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破
    em。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
    rem。（root em，根em）除了IE8及更早版本外，所有浏览器均已支持rem
    </pre>
</div>

<h3>vh和vw</h3>
<div>
    <pre>
        可视窗口的百分比 1vh=1%
    </pre>
</div>

<h3>移动端适配1px的问题</h3>
<div>
    <pre>
    现在基本不考虑了
    </pre>
</div>

<h3>rem在移动端的适配</h3>
<div>
    <pre>
		1. 页面中的所有元素，单位都是 rem
		2. 把整个屏幕的宽度设置成根元素的字体大小(1 rem = 375px)
    </pre>
</div>

<h3> CSS中 link 和@import 的区别是什么？</h3>
<div>
    <pre>
    a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
    b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
    c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
    d. link方式的样式的权重 高于@import的权重
    e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制
    </pre>
</div>

<h3> position的absolute与fixed共同点与不同点</h3>
<div>
    <pre>
    相同：a. 改变行内元素的呈现方式，display被置为block
    相同：b. 让元素脱离普通流，不占据空间
    相同：c. 默认会覆盖到非定位元素上
    区别： absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
    区别： 当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
    </pre>
</div>

<h3>position的值， relative和absolute分别是相对于谁进行定位的？</h3>
<div>
    <pre>
    absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
    fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
    relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
    static：默认值。没有定位，元素出现在正常的流中
    </pre>
</div>

<h3>rgba()和opacity的透明效果有什么不同？</h3>
<div>
    <pre>
    a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
    b. 设置rgba透明的元素的子元素不会继承透明效果！
    </pre>
</div>

<h3> 你如何对网站的文件和资源进行优化？</h3>
<div>
    <pre>
    1、文件合并； 2、文件最小化/文件压缩；3、使用 CDN 托管；4、缓存的使用；5、其他
    </pre>
</div>

<h3>请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）</h3>
<div>
    <pre>
    1). 使用CDN	 2).服务器开启gzip压缩  4). Javascript脚本放在文件末尾
    3). css样式的定义放置在文件头部 5). 压缩Javascript、CSS代码 6). 尽可能减少DOM元素
    7). 尽量减少页面中重复的HTTP请求数量 8). 使用多域名负载网页内的多个文件、图片
    9). 在服务器配置Entity-Tag if-none-match 0). 在服务器端配置control-cache last-modify-date
    </pre>
</div>

<h3>23条Web性能优化最佳实践和规则</h3>
<div>
    <pre>
    1).尽可能减少HTTP请求次数 2).使用CDN 3).避免使用src和href标签
    4).加入Expires或Cache-Control Header 5).使用Gzip压缩
    6).在html文件顶部放置样式表 7).在html文件底部放置Javascript脚本
    8).避免使用CSS表达式 9).使用外部Javascript和CSS外部文件
    10).减少使用DNS查找次数 11).精简Javascript和CSS 12).避免重定向 13).移除重复的脚本
    14).配置ETag 15).缓存AJAX 16).使用GET完成AJAX请求
    17).减少DOM元素数量 18).避免404 19).减少Cookie大小 20).使用无Cookie的域
    21).避免使用滤镜 22).不要在HTML中缩放图片 23).使用小favicon.ico文件，并让其可缓存
    </pre>
</div>

<h3><span>命中</span>什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？ </h3>
<div>
    <pre>
    屏幕分辨率自适应以及自动缩放,页面头部必须有meta声明viewport
    基本原理:css3的媒体查询@media  低端的IE 用 兼容IE可以使用JS辅助一下来解决
    </pre>
</div>

<h3>简述⼀下src与href的区别？ </h3>
<div>
    <pre>
        src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。
        src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素
        &lt;script src ="js.js">&lt;/script> 当浏览器解析到该元素时，会暂停其他
        资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素
        也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底
        部⽽不是头部
        href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加
        &lt;link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式
    </pre>
</div>

<h3>img的alt与title有何异同？b：strong与em的异同？</h3>
<div>
    <pre>
    alt(alt text) :为不能显示图像、窗体或 applets 的⽤户代理（ UA ）， alt 属性⽤来指定替换⽂字。替换⽂字的语⾔由 lang 属性指定。(在IE浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
    title(tool tip) :该属性为设置该属性的元素提供建议性的信息
    strong :粗体强调标签，强调，表示内容的重要性
    em :斜体强调标签，更强烈强调，表示内容的强调点
    </pre>
</div>

<h3>怎么让Chrome支持小于12px的文字</h3>
<div>
    <pre>
    -webkit-transform:scale(0.8)
    </pre>
</div>

<h3>UTF-8和GB2312的区别</h3>
<div>
    <pre>
    UTF-8:允许含BOM，但通常不含BOM,是国际编码,它对英文使用8位（即一个字节），中文使用24为（三个字节）来编码
    gb2312国内编码,（更小巧，加载更快）存储一个汉字2个字节
    </pre>
</div>

<h3>什么叫优雅降级和渐进增强</h3>
<div>
    <pre>
    渐进增强: 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    优雅降级: 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

.transition { /*渐进增强写法*/
    -webkit-border-radius:30px 10px;
    -moz-border-radius:30px 10px;
    border-radius:30px 10px;
}
.transition { /*优雅降级写法*/
    border-radius:30px 10px;
    -moz-border-radius:30px 10px;
    -webkit-border-radius:30px 10px;
}
    </pre>
</div>

<h3>表单可以跨域吗</h3>
<div>
    <pre>
    form表单提交不存在安全问题，ajax提交跨域存在安全问题。
    </pre>
</div>

<h3>更多面试>>>>></h3>
<div>
  <ul>
    <li><a href="https://www.bilibili.com/video/av59639585/?p=17" target="_blank">https://www.bilibili.com/video/av59639585</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000017198399" target="_blank">https://segmentfault.com/a/1190000017198399</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000018793064" target="_blank">https://segmentfault.com/a/1190000018793064</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000012428851" target="_blank">https://segmentfault.com/a/1190000012428851</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000009200927" target="_blank">https://segmentfault.com/a/1190000009200927</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000009480841" target="_blank">https://segmentfault.com/a/1190000009480841</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000009780497" target="_blank">https://segmentfault.com/a/1190000009780497</a>
    </li>
    <li><a href="https://github.com/airuikun/Weekly-FE-Interview" target="_blank">https://github.com/airuikun/Weekly-FE-Interview</a>
    </li>
    <li><a href="https://segmentfault.com/a/1190000009381768" target="_blank">https://segmentfault.com/a/1190000009381768</a>
    </li>
    <li><a href="https://segmentfault.com/u/haizlin" target="_blank">https://segmentfault.com/u/haizlin</a></li>
  </ul>
</div>

</body>
</html>

<script>
    $(function () {
        $("h3").click(function () {
            $(this).next().toggle();
        });
    })
</script>

